<template>
  <div class="hello">
    <!-- <h1>{{ msg }}</h1>
    <h3>title:{{ $parent.title }}</h3>
    <h3>age:{{ $parent.age }}</h3>
    <button type="button" @click="modifyFn">修改</button>
    <hr />
    <div>
      {{ content }}
    </div>
    <div><button type="button" @click="getRoot">root组件</button></div> -->
    <div>inject的数据: {{ list }}</div>
    <hr />
    <ChildView></ChildView>
  </div>
</template>

<script>
/* eslint-disable */ 
import ChildView from './ChildView.vue'
export default {
  myname: "hellokity",
  name: "HelloWorld",
  inject: [ 'list' ], // 数组的语法
  data () {
    return {
      age: 0,
      title: '',
      count: 100,
      sum :0,
      content: '我们都想你。'
    }
  },
  components:{
    ChildView,
  },
  props: {
    msg: String,
  },
  created(){
    console.log("1...子组件被created");
  },
  mounted(){
    console.log("1...子组件被挂载");
    // 不能在create钩子里面使用，因为子组件还没有挂在到父组件下面。
    // console.log(this.$parent);
    this.age = this.$parent.age;
    this.title = this.$parent.title;

    //  $props:
    console.log("props",this.$props); // { msg:'' } 由子组件中的props选项决定它的内容。 
    //  $attrs:
    console.log("attrs", this.$attrs); // {a: '1', b: '2', c: '3'}, 接收没有被porops生明的其他属性
  },
  methods:{
    modifyFn (){
      this.$parent.age = 100; 
      this.$parent.title = 'happy birthday...'
    },
    getRoot(){
      console.log(this.$root);  // App组件
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
